<template>
    <div class="userList">
        <div class="allList1" v-if='type==1&&userList.length>0'>
            <div class="listItem" v-for='(item,index) in userLists' :key="index">
                <div class="listMess">
                    <div class="listLeft">
                        <div class="headLogo">
                            <img src="../../assets/image/cutPrice/one.png" alt="" class="grade" v-if="index==0"/>
                            <img src="../../assets/image/cutPrice/two.png" alt="" class="grade" v-if='index==1'/>
                            <img src="../../assets/image/cutPrice/three.png" alt="" class="grade" v-if='index==2'/>
                            <img :src="item.SPATH" alt="" />
                        </div>
                        
                    </div>
                    <div class="listRight">
                        <div class="detailMess">
                            {{item.USER_NAME}}用{{item.BARGAIN_PRICE}}元购买了该商品
                        </div>
                        <div class="times">
                            {{item.PAY_TIME| filterTimes1}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="allList2 allList1" v-if='type==2&&userList.length>0'>
            <div class="cutPriceNum">共有{{userLists.length}}人使用砍购价下单</div>
            <div class="listItem" v-for='(item,index) in userLists' :key="index">
                <div class="listMess">
                    <div class="listLeft">
                        <div class="headLogo">
                            <img src="../../assets/image/cutPrice/one.png" alt="" class="grade" v-if="index==0"/>
                            <img src="../../assets/image/cutPrice/two.png" alt="" class="grade" v-if="index==1"/>
                            <img src="../../assets/image/cutPrice/three.png" alt="" class="grade" v-if="index==2"/>
                            <img :src="item.SPATH" alt="" />
                        </div>
                    </div>
                    <div class="listRight">
                        <div class="detailMess">
                            {{item.USER_NAME}}用{{item.BARGAIN_PRICE}}元购买了该商品
                        </div>
                        <div class="times">
                            {{item.PAY_TIME| filterTimes1}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "userList",
    // 数据
    data() {

        return {
            userId: '',
            page:1
        }
    },
    // 计算属性
    computed: {
        userLists(){
            return this.userList;
        }
    },
    props:['userList','type'],
    // 创建（实例创建完成）
    created() {
        // setInterval(()=>{
        //     this.checkAllUserList();
        // },500)
    },
    // el被创建，并挂载到实例上
    mounted() {
        
    },
    // 方法（实例中的方法）-----------
    methods: { 
        filterNum(num){
          return num>=10?num:'0'+num
        }
    },
    // 子组件
    components: {
    }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.userList {
    position: relative;
    margin-top: -0.2rem;
    .allList1{
        padding: 0.4rem 0 0.1rem;
        .listItem{
            width: 7.1rem;
            height: 0.88rem;
            margin: 0 auto 0.15rem;
            display: flex;
            padding: 0 0.03rem;
            justify-content:space-between;
            align-items:center;
            .listMess{
                display: flex;
                width: 100%;
                justify-content:space-between;
                align-items:center;
                .listLeft{
                    min-width: 0.82rem;
                    display: flex;
                    align-items:center;
                    .headLogo{
                        img{
                            width: 0.82rem;
                            height: 0.82rem;
                            border-radius: 0.41rem;
                            display: block;
                            margin-top: -0.15rem;
                            position: relative;
                            z-index: 22;
                        }
                        .grade{
                            width: 0.35rem;
                            height: 0.31rem;
                            margin-top: 0;
                            position:relative;
                            z-index: 23;
                        }
                    }
                } 
                .listRight{
                    display: flex;
                    height: 1rem;
                    align-items:center;
                    width: 100%;
                    margin-left: 0.2rem;
                    justify-content:space-between;
                    .detailMess{
                        padding-left: 0.05rem;
                        text-align: left;
                        font-size: 0.24rem;
                        color: #333;
                    }
                    .times{
                        width: 1.5rem;
                        font-size: 0.22rem;
                        color: #888888;
                    }
                }
            }
        }
    }
    .allList2{
        padding: 0.1rem 0;
        .cutPriceNum{
            font-size: 0.22rem;
            color: #666666;
            text-align: left;
            padding:0.3rem;
        }
        .listRight{
            .borderBFu(#DDDDDD);
        }
    }
}
</style>